<template>
  <div
    class="card"
    :class="isActive ? 'active' : ''"
    :style="
      `background-image:url(${bgImg}); --lp:${position.lp}%; --tp:${position.tp}%`
    "
    @mousemove="mousemove($event)"
    @mouseout="isActive = false"
    ref="cardRef"
  ></div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  props: {
    bgImg: String,
  },
  setup() {
    const cardRef = ref();
    const isActive = ref(false);
    //渐变背景,鼠标划上位置
    const position = reactive({
      lp: 0,
      tp: 0,
    });
    function mousemove(e: any) {
      isActive.value = true;
      const cardDom = cardRef.value;
      const l = e.offsetX;
      const t = e.offsetY;
      const h = cardDom.clientHeight;
      const w = cardDom.clientWidth;
      const lp = Math.abs(Math.floor((100 / w) * l) - 100);
      const tp = Math.abs(Math.floor((100 / h) * t) - 100);
      position.lp = lp;
      position.tp = tp;
    }

    return { cardRef, isActive, mousemove, position };
  },
});
</script>
<style lang="scss" scoped>
//整体布局
.card {
  width: 320px;
  height: 446px;
  background-color: #211799;
  // background-image: url(https://images.pokemontcg.io/xy2/12_hires.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 15px;
  box-shadow: -3px -3px 3px 0 rgba(#26e6f7, 0.3),
    3px 3px 3px 0 rgba(#f759e4, 0.3), 0 0 6px 2px rgba(#ffe759, 0.3),
    0 35px 25px -15px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin: 20px 10px;
  animation: holoCard 15s ease infinite;
  cursor: pointer;
}
//公共样式
.card::before,
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-image: linear-gradient(
    115deg,
    transparent 0%,
    rgb(0, 231, 255) 30%,
    rgb(255, 0, 231) 70%,
    transparent 100%
  );
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  opacity: 0.2;
  z-index: 1;
  animation: holoGradient 15s ease infinite;
}
//闪亮背景
.card::after {
  background-image: url("/img/sparkles.gif");
  background-position: center;
  background-size: 180%;
  mix-blend-mode: color-dodge;
  opacity: 1;
  z-index: 2;
  animation: holoSparkle 15s ease infinite;
}
//渐变背景
.card.active::before {
  opacity: 1;
  animation: none;
  transition: none;
  background-image: linear-gradient(
    115deg,
    transparent 0%,
    transparent 25%,
    rgba(0, 231, 255, 0.7) 45%,
    rgba(255, 0, 231, 0.7) 55%,
    transparent 70%,
    transparent 100%
  );
  //vue给伪元素赋值,这里从父元素的--val中取值
  background-position: var(--lp) var(--tp);
}
//activate时屏蔽原先animation
.card.active:before,
.card.active:after {
  animation: none;
}

//背景闪亮
@keyframes holoSparkle {
  0%,
  5% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
//背景渐变
@keyframes holoGradient {
  0%,
  100% {
    opacity: 0;
    background-position: 0% 0%;
  }
  8% {
    opacity: 0;
  }
  10% {
    background-position: 0% 0%;
  }
  19% {
    background-position: 100% 100%;
    opacity: 0.5;
  }
  35% {
    background-position: 100% 100%;
  }
  55% {
    background-position: 0% 0%;
    opacity: 0.3;
  }
  75% {
    opacity: 0;
  }
}
//卡片摇晃
@keyframes holoCard {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: rotateZ(-3deg) rotateX(-7deg) rotateY(6deg);
  }
  66% {
    transform: rotateZ(3deg) rotateX(7deg) rotateY(-6deg);
  }
}
</style>
